<template>
	<u-mask :show="show" @click="show = false">
		<view class="previewImage" :style="{ 'background-color': 'rgba(0,0,0,' + opacity + ')' }" v-if="show" @tap="close">
			<swiper class="swiper" :current="index" @change="swiperChange" :circular="true" :indicator-dots="true"
			 indicator-active-color="#6A82FB" indicator-color="#D8D8D8">
				<swiper-item v-for="(img, i) in imgs" :key="i">
					<!-- <movable-area class="marea" scale-area>
						<movable-view :key="i" class="mview" direction="all" :out-of-bounds="false" :inertia="true" damping="90" friction="2"
						 scale="true" scale-min="1" scale-max="4" :scale-value="scale" @scale="onScale" @change="movableChange"> -->
					<!-- 图片显示区域 -->
					<image :id="'image-'+i" :key="'movable-view'+i" class="marea image" :src="img" :style="{ transform: 'rotateZ(' + deg + 'deg)' }"
					 :data-index="i" :data-src="img" mode="aspectFit" @longtap.stop="onLongPress" @tap.stop />
					<!--  @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend" /> -->
					<!-- 标签显示 -->
					<view class="move_tag" :style="{ left: item.x + 'px', top: item.y * (934/750) + 'px'}" hover-class="opacity7"
					 v-for="(item, index) in wearData.content[index][0].tags" :index="index">
						<view class="dot"></view>
						<view class="tag">
							<image src="../../pagesB/static/img/wearPlan/cart.png"></image>
							<view>{{ item.name }}</view>
						</view>
					</view>
					<!-- 指引显示 -->
					<view class="mask_first" @click.stop="firstInWearPlan" v-if="toolTipShow === true">
						<image src="/static/img/wearPlan_zhiyin.png" mode="aspectFit"></image>
						<view class="tip">长按保存图片到相册后进入淘宝扫码搜索商品</view>
					</view>
					<!-- </movable-view>
					</movable-area> -->
				</swiper-item>
			</swiper>

			<!-- 下方点击区域 -->
			<view class="desc" v-if="descs.length == imgs.length">
				{{ descs[index] === '' ? '该张图片暂无简介' : descs[index]  }}
			</view>
			<view class="save flex_row" v-if="saveBtn" @click.stop.prevent="sharePoster"> <!-- save -->
				<image mode="aspectFit" src=""></image>
				<text class="text">保存</text>
			</view>

			<button @tap.stop class="fenxiang flex_row" :style="{right: wearData.buyerUserId === userInfo.id ? '158rpx' : 0}" open-type="share" style="background: transparent;margin: 0 !important;line-height: 0;">
				<image style="width: 39upx;height: 39upx;" src=""></image>
				<text class="text">分享</text>
			</button>
			<view v-if="wearData.buyerUserId === userInfo.id">
				<view class="like" v-if="wearData.content[index][0].isLike === null">
					<view class="flex_row" style="margin-left: 20upx;" @click.stop.prevent="setLike(1)">
						<image src="/static/img/shoucang_01.png" mode="aspectFit" style="width: 40upx;height: 35upx;"></image>
						<text class="text">不喜欢</text>
					</view>
				</view>
				<view class="like" v-else>
					<view class="flex_row">
						<image src="/static/img/shoucang_on.png" mode="aspectFit" style="width: 40upx;height: 35upx;"></image>
						<text class="text">喜欢</text>
					</view>
				</view>
			</view>

			<!-- 生成海报 -->
			<qrcode-poster ref="poster" :subTitle="wearData.content[index][0].introduce === '' ? '陌搭欢迎您' : wearData.content[index][0].introduce" :headerImg="imgs[index]"></qrcode-poster>
		</view>
	</u-mask>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		isBlank
	} from '@/utils/common.js'
	import QrcodePoster from '@/components/moda-qrcode-poster/moda-qrcode-poster.vue'

	export default {
		name: 'ksj-previewImage', //插件名称
		computed: {
			...mapState(['userInfo'])
		},
		props: {
			wearData: {
				// 整体方案数据
				type: Object,
				required: true,
				default: () => {
					return {};
				}
			},
			imgs: {
				//图片列表
				type: Array,
				required: true,
				default: () => {
					return [];
				}
			},
			descs: {
				//描述列表
				type: Array,
				required: false,
				default: () => {
					return [];
				}
			},
			//透明度,0到1之间。
			opacity: {
				type: Number,
				default: 0.8
			},
			//保存按键
			saveBtn: {
				type: Boolean,
				default: true
			},
			//旋转按键
			rotateBtn: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			wearData: {
				handler: function(newVal, oldVal) {
					this.wearData = newVal
				},
				deep: true,
			},
		},
		components: {
			QrcodePoster
		},
		data() {
			return {
				show: false, //显示状态
				index: 0, //当前页
				deg: 0, //旋转角度
				time: 0, //定时器
				interval: 1000, //长按事件
				scale: 1, //缩放比例
				// 自定义样式
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				},
				// 提示  
				toolTipShow: true
			};
		},
		// 组件内无法生效
		// onShareAppMessage(res) {
		// 	if(this.wearData.hasOwnProperty('id') === false) {
		// 		uni.showToast({
		// 			title: "该方案无法分享",
		// 			icon: 'none'
		// 		})
		// 		return
		// 	}
			
		// 	if (res.from === 'button') { // 来自页面内分享按钮
		// 		console.log(res.target)
		// 		console.log(this.wearData)
		// 	}
		// 	let imageUrl = this.imgs[this.index]
		
		// 	return {
		// 		title: this.wearData.content[this.index][0].introduce === '' ? '快来陌搭领取专属你的穿衣搭配方案吧' : this.wearData.content[0][0].introduce,
		// 		path: '/pages/order/placeOrderIndex?wearPlanId=' + this.wearData.id,
		// 		type: 0,
		// 		imageUrl: imageUrl,
		// 	}
		// },
		methods: {
			//分享海报
			sharePoster() {
				let path = '/pages/order/placeOrderIndex?wearPlanOrderId=' + this.wearData.orderId
				this.$u.api.createwxaqrcode({path: path}).then(res => {
					if (res.code === 200) {
						let code = res.data
						//获取带参数二维码并传递
						this.$refs.poster.showCanvas(code)
					}else {
						uni.showToast({
							title: "生成分享二维码失败"
						})
					}
				})
			},
			//比例变化
			// onScale(e) {
			// },
			//长按事件相关内容---------开始-------------------
			//接触开始
			handletouchstart(e) {
				var tchs = e.touches.length;
				if (tchs != 1) {
					return false;
				}
				this.time = setTimeout(() => {
					this.onLongPress(e);
				}, this.interval);
				return false;
			},
			//清除定时器
			handletouchend() {
				clearTimeout(this.time);
				if (this.time != 0) {
					//处理点击时间
				}
				return false;
			},
			//清除定时器
			handletouchmove() {
				clearTimeout(this.time);
				this.time = 0;
			},
			// 处理长按事件
			onLongPress(e) {
				var src = e.currentTarget.dataset.src;
				var index = e.currentTarget.dataset.index;
				var data = {
					src: src,
					index: index
				};
				this.$emit('longPress', data);
			},
			//长按事件相关内容---------结束-------------------

			//图片改变
			swiperChange(e) {
				this.index = e.target.current; //更新当前图片index
				// console.log(this.imgs[this.index])
				this.$nextTick(function() {
					this.scale = 1;
				})
			},

			//移动变化
			movableChange(e) {
				//console.log(e);
				/* if(this.old.scale <= 1){
					this.swiper=false;
				}else if(e.detail.x===0){
					this.swiper=false;
				} */
			},
			//保存
			save(e) {
				var _this = this;
				var src = this.imgs[this.index];
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
						console.log('kxj-previewImage:允许储存');
						_this.downloadImg(src);
					}
				});
			},

			//下载并保存文件
			downloadImg(src) {
				//下载图片文件
				uni.showLoading({
					title: '大图提取中'
				});
				uni.downloadFile({
					url: src,
					success: function(res) {
						uni.hideLoading();
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: '已保存至相册',
									duration: 1000
								});
							}
						});
					},
					fail: function() {
						uni.hideLoading();
						uni.showToast({
							title: '图片下载失败',
							icon: 'none',
							duration: 1000
						});
					}
				});
			},

			//旋转
			rotate(e) {
				this.deg = this.deg == 270 ? 0 : this.deg + 90;
			},
			// 设置喜欢不喜欢
			setLike(like) {
				var data = {
					id: this.wearData.id,
					index: this.index,
					isLike: like, // 0.喜欢 1.不喜欢 只能点一次
				}
				this.$u.api.checkScheme(data).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						this.wearData.content[this.index][0].isLike = like
						this.$emit('changeData', this.wearData);
					}
				})
			},
			//打开
			open(e) {
				// if (e === null || e === '') {
				// 	console.log('previewImage:打开参数无效');
				// 	return;
				// }

				// if (!isNaN(e)) {
				// 	if (e >= this.imgs.length) {
				// 		console.log('previewImage:打开参数无效');
				// 	} else {
				// 		this.index = e;
				// 	}
				// } else {
				// 	var index = this.imgs.indexOf(e);
				// 	if (index === -1) {
				// 		this.imgs = [e];
				// 		this.index = 0;
				// 		console.log('previewImage:未在图片地址数组中找到传入的图片，已为你自动打开单张预览模式')
				// 	} else {
				// 		this.index = this.imgs.indexOf(e);
				// 	}
				// }
				this.index = e
				// console.log('previewImage:当前预览图片序号' + this.index);
				if (isBlank(uni.getStorageSync('hasInfirst_WatchWearPlan'))) {
					this.toolTipShow = true
				} else {
					this.toolTipShow = false
				}
				this.show = true;

			},
			//关闭
			close(e) {
				this.show = false;
				this.index = 0; //当前页
				this.deg = 0; //旋转角度
				this.time = 0; //定时器
				this.interval = 1000; //长按事件
				this.scale = 1; //缩放比例
			},
			// 打卡引导遮罩
			firstInWearPlan() {
				this.toolTipShow = false
				uni.setStorageSync('hasInfirst_WatchWearPlan', true)
			},
		}
	};
</script>

<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
	.previewImage {
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		user-select: none;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.swiper {
			width: 750upx;
			height: 934upx;

			.marea {
				height: 100%;
				width: 100%;
				position: fixed;
				overflow: hidden;

				.mview {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					min-height: 100%;
					position: relative;

					.image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.page {
			position: absolute;
			width: 100%;
			bottom: 20rpx;
			text-align: center;

			.text {
				color: #fff;
				font-size: 28rpx;
				background-color: rgba(0, 0, 0, 0.5);
				padding: 3rpx 16rpx;
				border-radius: 20rpx;
				user-select: none;
			}
		}

		.save {
			position: absolute;
			left: 30rpx;
			bottom: 18rpx;
			text-align: center;

			image {
				width: 40upx;
				height: 40upx;
				margin-right: 12upx;
			}

			.text {
				color: #fff;
				font-size: 28rpx;
				user-select: none;
			}
		}

		.fenxiang {
			position: absolute;
			bottom: 20rpx;
			text-align: center;

			image {
				width: 37upx;
				height: 40upx;
				margin-right: 12upx;
			}

			.text {
				color: #fff;
				font-size: 28rpx;
				user-select: none;
			}
		}

		.like {
			position: absolute;
			right: 30rpx;
			bottom: 18rpx;
			text-align: center;
			display: flex;
			align-items: center;

			.text {
				margin-left: 12upx;
				color: #fff;
				font-size: 30upx;
			}
		}

		.desc {
			width: 100%;
			padding: 12rpx 30upx;
			text-align: left;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			color: #ffffff;
			font-size: 26rpx;
			letter-spacing: 3rpx;
			user-select: none;
		}
	}


	// 拖动标签
	.move_tag {
		display: flex;
		align-items: center;
		min-width: 300upx;
		position: absolute;

		.dot {
			width: 10upx;
			height: 10upx;
			background: white;
			border-radius: 50%;
			margin-right: 10px;
		}

		.tag {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: row;
			font-size: 28upx;
			padding: 6upx 12upx;
			border-radius: 5upx;
			background: rgba(17, 17, 17, 0.39);
			color: white;

			image {
				width: 38upx;
				height: 31upx;
				margin-right: 16upx;
			}
		}
	}

	// 首次遮罩提示
	.mask_first {
		position: absolute;
		width: 100%;
		display: flex;
		flex-direction: column;
		z-index: 1001;
		align-items: center;
		height: 100%;
		justify-content: center;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.39) 33%, rgba(0, 0, 0, 0.39) 69%, rgba(216, 216, 216, 0) 100%);

		image {
			width: 73upx;
			height: 108upx;
		}

		.tip {
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 11upx;
		}
	}
</style>
